﻿<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户中心</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery/jquery.min.js"></script>
<script src="js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
<script src="js/jquery.validation/1.14.0/messages_zh.min.js"></script>
<style>
input.error {
	border: 1px solid #E6594E;
}
</style>
</head>
<body>
	<div class="container">

		<form id="addOrderForm">
			<br />
			<div class="form-group">
				<label for="order_name">商品名称：</label> <input type="text"
					class="form-control" id="order_name" name="order_name"
					placeholder="输入商品名称">
			</div>
			<div class="form-group">
				<label for="order_price">商品价格：</label> <input type="text"
					class="form-control" id="order_price" name="order_price"
					placeholder="输入商品价格">
			</div>
			<div class="form-group">
				<label for="order_date">商品购买日期：</label> <input type="text"
					class="form-control" id="order_date" name="order_date"
					placeholder="输入商品日期">
			</div>
			<div class="form-group">
				<button type="button" id="saveBtn" class="btn btn-success">提交</button>
				<button type="button" id="cancelBtn" class="btn btn-default">取消</button>
			</div>
		</form>
	</div>

	<script>
		var addUser = function() {
			if (!check().form()) {
				return;
			}
			$.ajax({
				type : "GET",
				dataType : "json",
				url : "/order/add",
				data : {
					"order_name" : $("#order_name").val(),
					"order_price" : $("#order_price").val(),
					"order_date" : $("#order_date").val(),
				},
				success : function(msg) {
					//alert(msg);
					if (msg == -1) {
						location.href = 'index.html';
					}
					
					$('#cancelBtn').click();
				}
			});
		}

		$('#saveBtn').on('click', function() {
			addUser();
		});

		$('#cancelBtn').on('click', function() {
			var index = parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);
		});

		//校验字段是否正确 
		function check() {
			/*返回一个validate对象，这个对象有一个form方法，返回的是是否通过验证*/
			return $("#addOrderForm").validate({
				rules : {
					order_name : {
						required : true
					},
					order_price : {
						required : true
					},
					order_date : {
						required : true
					}
				},
				messages : {
					order_name : {
						required : "商品名不能为空"
					},
					order_price : {
						required : "商品价格不能为空"
					},
					order_date : {
						required : "商品日期不能为空"
					}

				}
			});
		}
	</script>
</body>
</html>